<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tab</title>
    <style>
        .tablemenu{
            width:700px;
            margin: 0 auto;
            border:1px solid #eee;
            }
        .menu{
        height:38px;
        background-color:#f7f7f7;
        line-height:38px;
        border-bottom:1px solid #e4393c;
        font-family: "microsoft yahei" ;;
        color:#666;
        }
        .active{
            float:left;
            padding:0 30px;
            cursor:pointer;
            font-size: 14px;
            }
        .menu .menu-item{
            float:left;
            padding:0 30px;
            cursor:pointer;
            font-size: 14px;
            }
        .menu .menu-item:hover{
            color:#e4393c;
            }
        .content{
            min-height:200px;
            border:1px solid #eee;
            font: 12px/150% tahoma,arial,Microsoft YaHei,Hiragino Sans GB,"\u5b8b\u4f53",sans-serif;
            }
        .hide{
            display:none;
            }

        .parameter{
            width:990px;
            color:#666;
            }
        ul li{
        list-style:none;
        }
        #parameter-brand li{
                        width:50%;
                        }
        .parameter ul li{
                float:left;
                padding-left:42px;
                margin-bottom:5px;
                }
        .parameter ul{
                overflow:hidden;
                }
        .hide li{
                        width:200px;
                        }
        .content a{text-decoration:none;
                color:#5e69ad;
                }
    </style>
</head>
<body>
    <div class="tablemenu">
        <div class="menu">
            <div class="menu-item active">商品详情</div>
            <div class="menu-item">规格包装</div>
            <div class="menu-item">累计评价</div>
            <div class="menu-item">售后保障</div>
        </div>
        <div class="content">
            <div class="parameter">
                <ul id="parameter-brand" class="parameter-list1">
                    <li title="精气神">
                        品牌:
                        <a href="">精气神</a>
                    </li>
                </ul>
            </div>
            <div class="hide">
                <li title="精气神山黑猪肉">商品名称：精气神山黑猪肉</li>
                    <li title="1308692">商品编号：1308692</li>
                    <li title="420.22kg">商品毛重：420.22kg</li>
                    <li title="天津市静海县">商品产地：天津市静海县</li>
                    <li title="冷冻">保存状态：冷冻</li>
                    <li title="黑猪">品种：黑猪</li>
                    <li title="250g-500g">重量：250g-500g</li>
                    <li title="国产">国产/进口：国产</li>
                    <li title="简装">包装：简装</li>
                    <li title="猪肉馅">分类：猪肉馅</li>
                    <li title="中国大陆">原产地：中国大陆</li>
                </div>
            <div class="hide">下面写包装内容</div>
            <div class="hide">累计评价内容</div>
            <div class="hide">售后保障与服务部分</div>
        </div>
    </div>
    <script>
        var mens=document.querySelector(".menu")
        // .onclick=function(){
        //     this.style.background=("red");
        // };
        var divs=mens.querySelectorAll("div");
        var hides=document.querySelectorAll(".hide");
        for(var i=0;i<divs.length;i++){
            divs[i].setAttribute("index",i);
            // console.log(divs)
            divs[i].onclick=function(){
                var index=this.getAttribute("index");
                
                for(var i=0;i<hides.length;i++){
                    hides[i].style.display="none";
                } 
                hides[index].style.display="block";
            }
            
        }
        
    </script>
</body>
</html>